<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>机构信息 【6076】</span>
      </div>
    </template>
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      label-width="120px"
      status-icon
    >
      <h4>基础信息</h4>
      <div class="margintop flex">
        <el-form-item label="机构名称" prop="name">
          <el-input v-model="ruleForm.name" style="width: 280px" />
        </el-form-item>
        <el-form-item label="短信签名" prop="name">
          <el-input
            v-model="ruleForm.name"
            maxlength="6"
            placeholder="请输入短信签名/不超过6个字"
            style="width: 280px"
          />
        </el-form-item>
      </div>
      <div class="margintop flex">
        <el-form-item label="网站标志" prop="name">
          <el-button type="primary" plain :icon="Plus">上传图片</el-button>
          <el-image
            :src="srcImage"
            style="width: 90px; height: 50px; margin: 0 10px"
          ></el-image>
          <div>尺寸：280*90</div>
        </el-form-item>
        <el-form-item label="网站图标" prop="name">
          <el-button type="primary" plain :icon="Plus">上传图片</el-button>
          <el-image
            :src="Image"
            style="
              width: 50px;
              height: 50px;
              margin: 0 20px;
              border-radius: 4px;
            "
          ></el-image>
          <div>尺寸：180*180</div>
        </el-form-item>
      </div>
      <el-form-item label="版权信息" prop="name" class="margintop">
        <el-input v-model="ruleForm.name" style="width: 280px" />
      </el-form-item>
      <el-form-item label="营业时间" prop="name" class="margintop">
        <el-input v-model="ruleForm.name" style="width: 280px" />
      </el-form-item>
      <el-form-item label="服务热线" prop="name" class="margintop">
        <el-input v-model="ruleForm.name" style="width: 280px" />
      </el-form-item>
      <el-form-item label="设置省份" prop="name" class="margintop">
        <el-button type="primary" plain>江苏</el-button>
      </el-form-item>
      <el-form-item label="meta标签" prop="name" class="margintop">
        <div>
          <el-input
            v-model="ruleForm.name"
            style="width: 280px"
            type="textarea"
          />
        </div>
        <div class="matop">
          {{`<meta name="baidu-site-verification" content="q8******8U" />`}}
        </div>
      </el-form-item>
      <el-form-item label="入驻chat高考" prop="name" class="margintop">
        <el-radio-group v-model="ruleForm.resource">
          <el-radio label="上架" />
          <el-radio label="下架" />
        </el-radio-group>
        <div style="margin: 0 20px; color: #165dff">如何入驻chat高考？</div>
      </el-form-item>
      <el-divider />

      <h4>应用信息</h4>
      <div class="margintop flex">
        <el-form-item label="公众号" prop="name">
          <el-button type="primary" plain :icon="Plus">上传图片</el-button>
          <el-image
            :src="srcImage"
            style="width: 90px; height: 50px; margin: 0 10px"
          ></el-image>
          <div>尺寸：360*360</div>
        </el-form-item>
        <el-form-item label="小程序banner" prop="name">
          <el-button type="primary" plain :icon="Plus">上传图片</el-button>
          <el-image
            :src="Image"
            style="
              width: 50px;
              height: 50px;
              margin: 0 20px;
              border-radius: 4px;
            "
          ></el-image>
          <div>尺寸：720*360</div>
        </el-form-item>
      </div>
      <div class="margintop flex">
        <el-form-item label="微信号" prop="name">
          <el-button type="primary" plain :icon="Plus">上传图片</el-button>
          <el-image
            :src="srcImage"
            style="width: 90px; height: 50px; margin: 0 10px"
          ></el-image>
          <div>尺寸：360*360</div>
        </el-form-item>
        <el-form-item label="小程序二维码" prop="name">
          <el-button type="primary" plain :icon="Plus">上传图片</el-button>
          <el-image
            :src="Image"
            style="
              width: 50px;
              height: 50px;
              margin: 0 20px;
              border-radius: 4px;
            "
          ></el-image>
          <div>尺寸：360*360</div>
        </el-form-item>
      </div>
      <el-form-item label="微博" prop="name" class="margintop">
        <el-input v-model="ruleForm.name" style="width: 280px" />
      </el-form-item>
      <el-form-item label="贴吧" prop="name" class="margintop">
        <el-input v-model="ruleForm.name" style="width: 280px" />
      </el-form-item>
      <el-form-item label="营销QQ" prop="name" class="margintop">
        <el-input v-model="ruleForm.name" style="width: 280px" />
      </el-form-item>
      <el-form-item label="QQ群" prop="name" class="margintop">
        <el-input v-model="ruleForm.name" style="width: 280px" />
      </el-form-item>
      <el-form-item label="留学联系人" prop="name" class="margintop">
        <el-input v-model="ruleForm.name" style="width: 280px" />
      </el-form-item>
      <el-form-item label="公众号文案" prop="name" class="margintop">
        <el-input
          v-model="ruleForm.name"
          style="width: 280px"
          type="textarea"
          :rows="3"
        />
      </el-form-item>
      <el-form-item label="微信授权登录H5" prop="name" class="margintop">
        <div class="cloum">
          <div class="alitem">
            <el-switch
              v-model="value"
              size="large"
              active-text="开启"
              inactive-text="关闭"
            />
            <div style="margin-left: 10px; color: #165dff">
              如何开启H5微信免登录？
            </div>
          </div>
          <el-input v-model="input" style="width: 280px" />
          <el-input v-model="input" style="width: 280px" class="margintop" />
        </div>
      </el-form-item>
      <el-form-item label="微信授权登录PC" prop="name" class="margintop">
        <el-switch
          v-model="value"
          size="large"
          active-text="开启"
          inactive-text="关闭"
        />
        <div style="margin-left: 10px; color: #165dff">
          如何开启PC微信免登录？
        </div>
      </el-form-item>
      <el-form-item label="首页展示公告" prop="name" class="margintop">
        <el-switch
          v-model="value"
          size="large"
          active-text="开启"
          inactive-text="关闭"
        />
      </el-form-item>
      <el-divider />

      <h4>网站SEO通用信息</h4>
      <el-form-item label="title" prop="name" class="margintop">
        <el-input
          v-model="title"
          style="width: 300px"
          type="textarea"
          :rows="30"
        />
      </el-form-item>
      <el-form-item label="Keywords" prop="name" class="margintop">
        <el-input
          v-model="title1"
          style="width: 300px"
          type="textarea"
          :rows="6"
        />
      </el-form-item>
      <el-form-item label="Description" prop="name" class="margintop">
        <el-input
          v-model="title2"
          style="width: 300px"
          type="textarea"
          :rows="6"
        />
      </el-form-item>
      <el-divider />

      <h4>在线客服与网站统计</h4>
      <el-form-item label="在线客服" prop="name" class="margintop">
        <div class="cloum">
          <div>
            <el-checkbox v-model="checked1" label="PC启用" size="large" />
            <el-checkbox v-model="checked2" label="H5启用" size="large" />
          </div>
          <el-input
            v-model="input"
            style="width: 280px"
            type="textarea"
            :rows="3"
          />
          <div>
            粘贴第三方在线客服js代码
            <span style="color: #165dff">Live800客服</span>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="访问统计" prop="name" class="margintop">
        <div class="cloum">
          <el-input
            v-model="input"
            style="width: 280px"
            type="textarea"
            :rows="3"
          />
          <div>
            粘贴第三方统计js代码
            <span style="color: #165dff">中国站长统计</span>
          </div>
        </div>
      </el-form-item>
      <el-form-item label="第三方客服" prop="name" class="margintop">
        <div class="cloum">
          <div>
            <el-checkbox v-model="checked1" label="PC启用" size="large" />
            <el-checkbox v-model="checked2" label="H5启用" size="large" />
          </div>
          <el-input
            v-model="input"
            style="width: 280px"
            type="textarea"
            :rows="3"
          />
        </div>
      </el-form-item>
      <el-form-item label="微信小程序客服" prop="name" class="margintop">
        <el-checkbox v-model="checked1" label="PC启用" size="large" />
      </el-form-item>
      <el-form-item label="备案信息" prop="name" class="margintop">
        <el-input
          v-model="input"
          style="width: 280px"
          type="textarea"
          :rows="3"
        />
      </el-form-item>
      <el-divider />

      <h4>应用配置</h4>
      <el-form-item label="用户体系" prop="name" class="margintop">
        <div class="cloum">
          <div>功能配置</div>
          <div class="between">
            <div style="margin-right: 30px">用户注销功能</div>
            <el-switch v-model="checked1" />
          </div>
          <div>字段配置</div>
          <div class="between">
            <el-checkbox
              v-model="checked1"
              label="注册时必填学校"
              size="large"
            />
            <el-checkbox
              v-model="checked1"
              label="注册时必填班级"
              size="large"
            />
          </div>
          <div>通用配置</div>
          <div class="between">
            <div>
              <span style="color: #86909c !important">开启单点登录</span>
              <el-switch v-model="checked1" />
            </div>
            <div style="margin-left: 60px">
              <span style="color: #86909c !important">是否冻结体验VIP</span>
              <el-switch v-model="checked1" />
            </div>
          </div>
        </div>
      </el-form-item>

      <el-form-item class="matop">
        <el-button
          type="primary"
          @click="submitForm(ruleFormRef)"
          style="width: 137px"
          class="height40"
        >
          保存
        </el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>
<script setup>
import { ref, reactive } from 'vue';
import { Plus } from '@element-plus/icons-vue';

const srcImage = ref(
  'https://i5.youzy.cn/util4y/media/files/230822_8139f58201ad4d91a6a78ca8a09a8c2a/logo尺寸_1(2).png'
);
const Image = ref(
  'https://i5.youzy.cn/util4y/media/files/230822_2bbcefa6cc5444cc8858798ac30cae84/logo尺寸_2(2).png'
);
const input = ref('');
const checked1 = ref(true);
const checked2 = ref(true);
const title = ref(
  '会心升学怎么样？\n' +
    '会心升学小程序怎么样？\n' +
    '会心升学一对一怎么样？\n' +
    '会心升学：高考志愿填报的专家指南\n' +
    '高考志愿填报不求人，会心升学来帮您\n' +
    '会心升学，为你的高考志愿填报把关\n' +
    '填报高考志愿，会心升学给你支招\n' +
    '高考志愿填报技巧：会心升学为你解密\n' +
    '如何选择适合自己的专业？会心升学为你分析\n' +
    '会心升学，让你的高考志愿填报更有把握\n' +
    '优化高考志愿填报，会心升学为你出谋划策\n' +
    '精准填报高考志愿，会心升学为你导航\n' +
    '高考志愿填报全攻略：会心升学助你一臂之力\n' +
    '会心升学，为你的高考志愿填报提供专业咨询\n' +
    '高考志愿填报：开启未来的关键一步\n' +
    '填报志愿需谨慎：高考后的重要抉择\n' +
    '选对专业，开启成功之路：高考志愿填报指南\n' +
    '明确目标，填报高考志愿\n' +
    '策略与技巧：如何填报高考志愿\n' +
    '优化选择：高考志愿填报的艺术\n' +
    '避免常见错误：高考志愿填报的注意事项\n' +
    '探索职业前景：高考志愿填报与未来规划\n' +
    '从高考到成功：正确填报志愿的重要性\n' +
    '精准决策：高考志愿填报的策略与方法'
);
const ruleForm = reactive({
  name: '',
});
const value = ref('');
</script>
<style lang="scss" scoped>
::v-deep(.el-form--inline .el-form-item) {
  margin-right: 7px;
}

::v-deep(.el-form-item--default) {
  margin-bottom: 4px;
}

.box-card {
  margin: 20px;

  .card-header {
    font-size: 20px;
    font-weight: 600;
    color: #1d2129;
    padding: 10px;

    .headerSize {
      color: #4e5969;
      font-size: 14px;
      margin-left: 12px;
      font-weight: 400;
      height: 20px;
      line-height: 21px;
    }
  }
}
</style>
